<template>
  <div class="page-wrapper">
    <b-container fluid>
      <b-row align-h="center">
        <b-col lg="11" class="content-nav">
          <div class="d-none d-sm-block page-breadcrumb">
            <a-breadcrumb separator=">">
              <a-breadcrumb-item href="/">首页</a-breadcrumb-item>
              <a-breadcrumb-item href="/news">新闻动态</a-breadcrumb-item>
              <a-breadcrumb-item>{{ breadcrumbTitle }}</a-breadcrumb-item>
            </a-breadcrumb>
          </div>
        </b-col>
        <b-col lg="11" class="news-detail-wrapper">
          <b-container fluid>
            <b-row>
              <b-col md="2" lg="1" class="news-detail-left">
                <div class="news-detail-datetime-wrapper">
                  <p class="news-detail-year-label">{{ yearLabel }}</p>
                  <p class="news-detail-monthday-label">
                    {{ monthHythenDay }}
                  </p>
                </div>
              </b-col>
              <b-col cols="12" md="7" lg="9" class="news-detail-center">
                <div class="news-detail-title-container">
                  <p class="news-detail-title">{{ title }}</p>
                  <p class="news-detail-summary">{{ summary }}</p>
                </div>
                <div class="sep" />
                <div class="news-detail-content-container" v-html="content" />
                <div class="news-navigator-container">
                  <div
                    class="news-navigator-item"
                    :class="{ 'news-navigator-item-solid': !!prevEntry }"
                    @click="navigateToPrevNews"
                  >
                    <p class="news-navigator-item-indicator">上一篇：</p>
                    <p class="news-navigator-item-title">
                      {{ prevEntry ? prevEntry.title : '' }}
                    </p>
                  </div>
                  <div
                    class="news-navigator-item"
                    :class="{ 'news-navigator-item-solid': !!nextEntry }"
                    @click="navigateToNextNews"
                  >
                    <p class="news-navigator-item-indicator">下一篇：</p>
                    <p class="news-navigator-item-title">
                      {{ nextEntry ? nextEntry.title : '' }}
                    </p>
                  </div>
                </div>
              </b-col>
              <b-col md="3" lg="2" class="news-detail-right">
                <p class="news-related-segment-title">相关内容</p>
                <div class="sep" />
                <div class="news-related-container">
                  <div v-for="rn in relatedEntries" :key="rn.id">
                    <div
                      class="news-related-entry"
                      @click="navigateToRelatedNews(rn.id)"
                    >
                      <p class="news-related-entry-title">{{ rn.title }}</p>
                      <p class="news-related-entry-sammary">{{ rn.summary }}</p>
                    </div>
                    <div class="sep" />
                  </div>
                </div>
              </b-col>
            </b-row>
          </b-container>
        </b-col>
      </b-row>
    </b-container>
  </div>
</template>

<script>
import siteConfig from '@/assets/config/site';

const NEWS_DETAIL_API = `${siteConfig.apiPrefix}${siteConfig.apis.newsDetail}`;

export default {
  newstDetailAPI: NEWS_DETAIL_API,
  layout: 'staticBanner',
  data() {
    return {
      newsId: null,
      news: null,
      prevEntry: null,
      nextEntry: null,
      relatedEntries: [],
      imgDomain: '',
    };
  },
  computed: {
    breadcrumbTitle() {
      if (this.news) {
        return this.news.title;
      }
      return '新闻详情';
    },
    title() {
      return this.news ? this.news.title : '';
    },
    summary() {
      return this.news ? this.news.summary : '';
    },
    content() {
      return this.news ? this.news.content : '';
    },
    yearLabel() {
      if (!this.news) {
        return;
      }
      return this.$utils.dt.getYear(this.news.createtime);
    },
    monthHythenDay() {
      if (!this.news) {
        return;
      }
      return this.$utils.dt.getMonthHyphenDay(this.news.createtime);
    },
  },
  async asyncData({ route, $axios }) {
    const { params } = route;
    const { id: newsId } = params;
    let news = null;
    let prevEntry = null;
    let nextEntry = null;
    let relatedEntries = [];
    let imgDomain = '';
    try {
      const data = (await $axios.$get(NEWS_DETAIL_API, {
        params: { newsId },
      })).data;
      console.log('>>>>data:', data);
      news = data.entry;
      prevEntry = data.prevEntry;
      nextEntry = data.nextEntry;
      relatedEntries = data.relatedEntries;
      imgDomain = data.domain;
    } catch (err) {
      return {
        newsId: null,
        news: null,
        prevEntry: null,
        nextEntry: null,
        relatedEntries: [],
        imgDomain,
      };
    }
    return {
      newsId,
      news,
      prevEntry,
      nextEntry,
      relatedEntries,
      imgDomain,
    };
  },
  async mounted() {
    if (!this.newsId) {
      this.newsId = this.$route.params.id;
      await this.loadDetail();
    }
    // console.log('>>>>news', this.news);
  },
  methods: {
    async loadDetail() {
      try {
        const data = (await this.$axios.$get(this.$options.newsDetailAPI, {
          params: { newsId: this.newsId },
        })).data;
        this.news = data.entry;
        this.prevEntry = data.prevEntry;
        this.nextEntry = data.nextEntry;
        this.relatedEntries = data.relatedEntries;
        this.imgDomain = data.domain;
      } catch (err) {
        this.$message.error('网络错误，请稍后再试');
      }
    },
    navigateToPrevNews() {
      if (!this.prevEntry) {
        return;
      }
      this.$router.push({
        name: 'news-id',
        params: { id: this.prevEntry.id },
      });
    },
    navigateToNextNews() {
      if (!this.nextEntry) {
        return;
      }
      this.$router.push({
        name: 'news-id',
        params: { id: this.nextEntry.id },
      });
    },
    navigateToRelatedNews(id) {
      if (!this.nextEntry) {
        return;
      }
      this.$router.push({
        name: 'news-id',
        params: { id },
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.page-wrapper {
  height: 100%;
  width: 100%;
  // background: #f3f3f3;
  display: flex;
  flex-direction: column;
  align-items: center;
  @include media-breakpoint-up(sm) {
    padding-top: $main-nav-bar-height;
  }
}
.content-nav {
  margin: 24px 12px;
  @include media-breakpoint-down(xs) {
    margin-bottom: 0px;
  }
}
.news-detail-wrapper {
  margin-top: 24px;
}
.news-detail-left {
  display: none;
  @include media-breakpoint-up(md) {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
  }
  text-align: center;
}
.news-detail-datetime-wrapper {
  width: 90px;
  border: 1px solid #ddd;
  padding-top: 12px;
  padding-bottom: 12px;
}
.news-detail-year-label {
  font-family: 'ArialMT', 'Arial Normal', 'Arial';
  font-weight: 400;
  font-style: normal;
  text-decoration: none;
  font-size: 28px;
  line-height: 28px;
  letter-spacing: normal;
  color: #666;
  margin: 0px;
}
.news-detail-monthday-label {
  font-family: 'ArialMT', 'Arial';
  font-weight: 400;
  text-decoration: none;
  color: #999;
  font-size: 20px;
  line-height: 28px;
  margin: 0px;
}
.news-detail-center {
  padding-left: 36px;
}
.news-detail-title {
  font-family: '微软雅黑 Bold', '微软雅黑';
  font-weight: 700;
  text-decoration: none;
  font-style: normal;
  text-align: left;
  line-height: 32px;
  font-size: 20px;
  color: #666;
  margin: 0px;
}
.news-detail-summary {
  font-family: '微软雅黑';
  font-weight: 400;
  text-decoration: none;
  color: #999;
  text-align: left;
  line-height: 32px;
  font-size: 16px;
  margin: 0px;
}
.sep {
  height: 1px;
  background-color: #ddd;
  width: 98%;
  margin: 12px 0px 24px;
}
.news-detail-content-container {
  overflow: hidden;
  margin-top: 12px;
}
.news-navigator-container {
  display: flex;
  justify-content: space-between;
  padding: 0px;
  margin: 48px 6px;
}
.news-navigator-item {
  height: 100px;
  flex: 0 0 48%;
  width: 1px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: 0px 20px;
}
.news-navigator-item-solid {
  background-color: rgba(242, 242, 242, 1);
  border-left-width: 3px;
  border-left-style: solid;
  border-left-color: rgb(228, 228, 228);
  cursor: pointer;
}
.news-navigator-item-indicator {
  font-family: '微软雅黑';
  font-weight: 400;
  text-decoration: none;
  color: transparent;
  font-size: 14px;
  font-style: normal;
  text-align: left;
  line-height: 28px;
  .news-navigator-item-solid & {
    color: #999;
  }
  margin: 0px;
}
.news-navigator-item-title {
  font-family: '微软雅黑 Bold', 微软雅黑;
  font-weight: 700;
  text-decoration: none;
  color: transparent;
  font-size: 16px;
  font-style: normal;
  text-align: left;
  line-height: 28px;
  .news-navigator-item-solid & {
    color: #666;
  }
  margin: 0px;
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.news-detail-right {
  display: none;
  @include media-breakpoint-up(md) {
    display: flex;
    flex-direction: column;
  }
}
.news-related-segment-title {
  font-family: '微软雅黑';
  font-weight: 400;
  font-style: normal;
  color: #999;
  text-align: left;
  line-height: 28px;
  font-size: 14px;
  margin: 0px;
}
.news-related-entry {
  cursor: pointer;
}
.news-related-entry-title {
  font-family: '微软雅黑';
  font-weight: 400;
  font-style: normal;
  text-align: left;
  line-height: 28px;
  color: #666;
  font-size: 18px;
  margin: 0px;
  // width: 100%;
  max-height: 56px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.news-related-entry-sammary {
  font-family: '微软雅黑';
  font-weight: 400;
  text-decoration: none;
  color: #999;
  font-size: 14px;
  line-height: 28px;
  max-height: 56px;
  overflow: hidden;
}
</style>
